<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>管理列表</p>
		</header>

		<!-- 商家列表部分 -->
		<ul class="business">
			<li v-for="item in businessArr" >
				<div class="business-img">
					<img :src=item.businessImg>
					<div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
				</div>
				<div class="business-info">
					<h3>{{item.businessName}}</h3>
					<h4 @click="toFoodManagement(item.businessId)">管理菜品</h4>
					<i class="fa fa-edit" @click="toUpdateBusinessInfo(item)">修改店铺信息</i>
					<i class="fa fa-remove" @click="removeBusinessInfo(item.businessId)">删除店铺</i>
				</div>
			</li>
		</ul>
		<div style="margin-bottom: 12vw;">
			<button @click="toInsertBusinessInfo(user.userId)">新增店铺</button>
		</div>
		<p>------------------------------------------------------</p>

		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import Footer from '../components/Footer.vue';
import axios from 'axios';
import qs from 'qs';
import { useRouter } from 'vue-router';

const businessArr = ref([]);
const user = ref({});
const router = useRouter();
const {proxy}= getCurrentInstance();

onMounted(() => {
  user.value = proxy.$getSessionStorage('user');

  // 根据orderTypeId查询商家信息
  axios.post('BusinessController/listBusinessByManagerId', qs.stringify({
    manager: user.value.userId
  })).then(response => {
    businessArr.value = response.data;
    // 判断是否登录
  }).catch(error => {
    console.error(error);
  });
});

const toUpdateBusinessInfo = (business) => {
	business=JSON.stringify(business);
  router.push({ path: '/updateBusinessInfo', query: { business:business } });
};

const toInsertBusinessInfo = (manager) => {
  router.push({ path: '/insertBusinessInfo', query: { manager } });
};

const toFoodManagement = (businessId) => {
  router.push({ path: '/foodManagement', query: { businessId } });
};

const removeBusinessInfo = (businessId) => {
  if (!confirm('确认要删除此店铺吗？')) {
    return;
  }
  
  axios.post('BusinessController/deleteBusinessById', qs.stringify({
    businessId: businessId
  })).then(response => {
    if (response.data > 0) {
      alert('删除店铺成功！');
      axios.post('BusinessController/listBusinessByManagerId', qs.stringify({
        manager: user.value.userId
      })).then(response => {
        businessArr.value = response.data;
        // 判断是否登录
      }).catch(error => {
        console.error(error);
      });
    } else {
      alert('删除店铺失败！');
    }
  }).catch(error => {
    console.error(error);
  });
};
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 商家列表部分 ******************/
	.wrapper .business {
		width: 100%;
		margin-top: 12vw;
	}

	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
		cursor: pointer;

		display: flex;
		align-items: center;
	}

	.wrapper .business li .business-img {
		/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
		position: relative;
	}

	.wrapper .business li .business-img img {
		width: 20vw;
		height: 20vw;
	}

	.wrapper .business li .business-img .business-img-quantity {
		width: 5vw;
		height: 5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;
		border-radius: 2.5vw;

		display: flex;
		justify-content: center;
		align-items: center;

		/*设置成绝对定位，不占文档流空间*/
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}

	.wrapper .business li .business-info {
		margin-left: 3vw;
	}

	.wrapper .business li .business-info h3 {
		font-size: 3.8vw;
		color: #555;
	}

	.wrapper .business li .business-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
</style>
